<template>
    <div style="font-size: 20px;">
      <i :class="this.isCollapse?'el-icon-s-fold':'el-icon-s-unfold'" style="color:#eee;cursor: pointer;margin-left:10px;" @click="collapse"></i>
      <el-dropdown style="float:right;margin-right: 20px;" @command="handleCommand">
      <span style="font-size: 20px;color:#eee;cursor:pointer">
        <i class="el-icon-user"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-user-solid">个人信息</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
</template>

<script>
export default {
    name: 'header',
    props: {
        style: Object
    },
    data() {
        return {
            defaultSize:{
                height: "",
                "line-height": "",
            },
          isCollapse: true,
        }
    },
    methods: {
      autoSize(){ //自适应高度
        this.defaultSize.height =  window.innerHeight * 0.08 + "px";
        this.defaultSize["line-height"] = this.defaultSize.height;
        console.log("header:" + this.defaultSize.height)
      },
      collapse(){ //收起或展开侧边栏
        this.$emit("collapse");
        this.isCollapse = !this.isCollapse;
      },
      handleCommand(command){ //下拉选点击触发事件
        if(command=='logout'){
          this.logout();
        }
      },
      logout(){ //退出登陆
        alert();
          this.$router.replace("/login");
      }
    },
    created(){
         window.addEventListener("resize", this.autoSize);
         this.autoSize();
    }
}
</script>

<style scoped>
    
</style>